<template>
<div id="headTemplate">
    <Row class="head">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="background-color: #fff;">
            <Row>
                <Col span="4">
                    <div style="margin: 5px;">
                        <span>一站式</span>
                    </div>
                    <div style="margin-left: 5px;">
                        <span>声誉风险智能防控平台</span>
                    </div>
                </Col>
                <Col span="16"><div style="width: 1px;height: 1px;"></div></Col>
                <Col span="4" style="text-align: right;">
                    <div style="margin: 5px;">
                        <span style="font-size: 15px;font-weight: 600;">咨询热线：400-000-000</span>
                    </div> 
                    <div style="margin-right: 5px;">
                        <Row>
                            <Col span="6"><div style="width: 1px;height: 1px;"></div></Col>
                            <Col span="8"><Avatar :src="userAvator" style="cursor:pointer;"/></Col>
                            <Col span="5">
                                <Poptip placement="bottom" width="325" trigger="hover">
                                    <span class="infoButton">登录</span>
                                    <div class="api" slot="content">
                                        <div class="login">
                                            <div class="login-con">
                                              <Card icon="log-in" title="欢迎登录" :bordered="false" dis-hover>
                                                <div class="form-con">
                                                  <login-form @on-success-valid="handleSubmit"></login-form>
                                                  <p class="login-tip">请输入用户名与密码</p>
                                                </div>
                                              </Card>
                                            </div>
                                        </div>
                                    </div>
                                </Poptip>
                            </Col>
                            <Col span="5">
                                <Poptip placement="bottom" width="325" trigger="hover">
                                    <span class="infoButton">注册</span>
                                    <div class="api" slot="content">
                                        <div class="login">
                                            <div class="login-con">
                                              <Card icon="log-in" title="欢迎注册" :bordered="false" dis-hover>
                                                <div class="form-con">
                                                  <login-form @on-success-valid="handleSubmit"></login-form>
                                                  <p class="login-tip">请输入用户名与密码</p>
                                                </div>
                                              </Card>
                                            </div>
                                        </div>
                                    </div>
                                </Poptip>
                            </Col>
                        </Row>
                    </div>
                    
                </Col>
            </Row>
        </Col>
        <Col span="2" ><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Divider style="margin: 5px 0px -1px;background-color:rgb(74,255,255);"/>
    <Row class="navigation">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20">
            <Row>
                <Col span="3"><div style="width: 1px;height: 1px;"></div></Col>
                <Col span="18">
                    <Row>
                        <Col span="8"><div style="width: 1px;height: 1px;"></div></Col>
                        <Col span="16">
                            <Row>
                                <Col span="4"><div style="width: 1px;height: 1px;"></div></Col>
                                <Col span="4" class="navigationList HoverDisplay"><div>首页</div></Col>
                                <Col span="4" class="navigationList"><div>服务与产品</div></Col>
                                <Col span="4" class="navigationList"><div>声誉热点</div></Col>
                                <Col span="4" class="navigationList"><div>案例分析</div></Col>
                                <Col span="4" class="navigationList"><div>关于我们</div></Col>
                            </Row>
                        </Col>
                    </Row>
                </Col>
                <Col span="3"><div style="width: 1px;height: 1px;"></div></Col>
            </Row>
        </Col>
        <Col span="2" ><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="carousel">
        <!-- <Col span="2"><div style="width: 1px;height: 1px;"></div></Col> -->
        <Col span="24">
            <Carousel v-model="carousel" loop autoplay arrow="never">
                <CarouselItem>
                    <div class="demo-carousel">
                        <img :src="carouselOne">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <img :src="carouselTwo">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <img :src="carouselThree">
                    </div>
                </CarouselItem>
            </Carousel>
        </Col>
    </Row>
    <Row class="tracking">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="text-align: center;margin-top: 60px;">
            <div style="width: 10%;margin: 0 auto;position: relative;border-bottom:1px solid;height: 46px;">
                <h2>声誉热点追踪</h2>
                <div style="z-index: 66;width:60%;margin: 0 auto;position: absolute;bottom: -7px;left: 20%;font-size: 12px;font-weight: 600;color: #989898;background-color: #f5f5f5;">
                    <span>ABOUT US</span>
                </div>
            </div>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="tracking">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="margin-top: 40px;margin-bottom:50px">
            <Row>
                <Col span="16">
                    <Card class="TabPaneClass">
                        <Tabs v-model="TabPaneName">
                            <TabPane label="最新" name="1">
                                <Row>
                                    <Col span="12">
                                        <div style="padding:5px 20px 5px 10px">
                                            <Table :columns="columnsTable" :data="dataTable"></Table>
                                        </div>
                                    </Col>
                                    <Col span="12">
                                        <div style="padding:5px 10px 5px 20px">
                                            <Table :columns="columnsTable" :data="dataTable"></Table>
                                        </div>
                                    </Col>
                                </Row>
                            </TabPane>
                            <TabPane label="证券" name="2">证券</TabPane>
                            <TabPane label="基金" name="3">基金</TabPane>
                            <TabPane label="保险" name="4">保险</TabPane>
                            <TabPane label="互联网金融" name="5">互联网金融</TabPane>
                            <TabPane label="房地产" name="6">房地产</TabPane>
                            <TabPane label="金融科技" name="7">金融科技</TabPane>
                        </Tabs>
                    </Card>
                </Col>
                <!-- <Col span="1"><div style="width: 1px;height: 1px;"></div></Col> -->
                <Col span="8">
                    <Row>
                        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
                        <Col span="22">
                            <Card class="TabPaneClass" style="height: 619px;">
                                <div style="padding:0px 0px 5px 0px;overflow: auto;">
                                    <h2 style="text-align:center;margin-bottom: 20px;"><img :src="backgroundImg.huomiao" style="transform: translateY(15%);margin: 0 10px 0 -10px;"/>近七日风险排行榜</h2>
                                    <Table :columns="columnsTableRight" :data="dataTableRight"></Table>
                                </div>
                            </Card>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="introduce">
                <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
                <Col span="20" style="text-align: center;margin-top: 60px;">
                    <div style="width: 10%;margin: 0 auto;position: relative;border-bottom:1px solid;height: 46px;">
                        <h2>产品介绍</h2>
                        <div style="z-index: 66;width:60%;margin: 0 auto;position: absolute;bottom: -7px;left: 20%;font-size: 12px;font-weight: 600;color: #989898;background-color: #ffffff;">
                            <span>PROCESS</span>
                        </div>
                    </div>
                </Col>
                <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="introduce">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20">
            <Row  style="margin-top: 40px;">
                <Col span="8" style="" class="introduceImg">
                    <div style="margin:0 30px 0 0">
                        <img v-if="displayOne" :src="backgroundImg.introduceOne" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
                <!-- <Col span="3"><div style="width: 1px;height: 1px;"></div></Col> -->
                <Col span="8" style="" class="introduceImg">
                    <div  style="margin:0 15px">
                        <img :src="backgroundImg.introduceTwo" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
                <!-- <Col span="3"><div style="width: 1px;height: 1px;"></div></Col> -->
                <Col span="8" style="" class="introduceImg">
                    <div  style="margin:0 0 0 30px">
                        <img :src="backgroundImg.introduceThree" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
            </Row>
            <Row  style="margin-top: 20px;margin-bottom:30px">
                <Col span="8" style="" class="introduceImg">
                    <div style="margin:0 30px 0 0">
                        <img :src="backgroundImg.introduceFour" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
                <!-- <Col span="3"><div style="width: 1px;height: 1px;"></div></Col> -->
                <Col span="8" style="" class="introduceImg">
                    <div  style="margin:0 15px">
                        <img :src="backgroundImg.introduceFive" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
                <!-- <Col span="3"><div style="width: 1px;height: 1px;"></div></Col> -->
                <Col span="8" style="" class="introduceImg">
                    <div  style="margin:0 0 0 30px">
                        <img :src="backgroundImg.introduceSix" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
            </Row>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row>
        <Col span="24" style="background-color: #f5f5f5;"><div style="width: 1px;height:60px;"></div></Col>
    </Row>
    <Row class="advantage">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="text-align: center;margin-top: 60px;">
            <div style="width: 10%;margin: 0 auto;position: relative;border-bottom:1px solid #ffffff;color: #ffffff;height: 46px;">
                <h2>技术优势</h2>
                <div style="z-index: 66;width:60%;margin: 0 auto;position: absolute;bottom: -7px;left: 20%;font-size: 12px;font-weight: 600;color: #ffffff;background-color: #282a37;">
                    <span>TECHNOLOGY</span>
                </div>
            </div>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="advantage">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20">
            <Row  style="margin-top: 40px;margin-bottom:50px">
                <Col span="8" style="" class="advantageImg">
                    <div style="margin:0 30px 0 0">
                        <img :src="backgroundImg.advantageOne" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
                <Col span="8" style="" class="advantageImg">
                    <div  style="margin:0 15px">
                        <img :src="backgroundImg.advantageTwo" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
                <Col span="8" style="" class="advantageImg">
                    <div  style="margin:0 0 0 30px">
                        <img :src="backgroundImg.advantageThree" alt="" style="width: 100%;height: 100%;">
                    </div>
                </Col>
            </Row>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="scenario" style="background-color:#f5f5f5">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="text-align: center;margin-top: 60px;margin-bottom:40px">
            <div style="width: 10%;margin: 0 auto;position: relative;border-bottom:1px solid;height: 46px;">
                <h2>应用场景</h2>
                <div style="z-index: 66;width:60%;margin: 0 auto;position: absolute;bottom: -7px;left: 20%;font-size: 12px;font-weight: 600;color: #989898;background-color: #f5f5f5;">
                    <span>APPLICATION</span>
                </div>
            </div>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="scenario">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="margin-top: 40px;margin-bottom:50px">
            <Row>
                <Col span="6" style="" class="scenarioImg">
                    <div style="margin:0 10px 0 0">
                        <img :src="backgroundImg.scenarioOne" alt="" style="width: 100%;height: 100%;background-color: #fff;">
                    </div>
                </Col>
                <Col span="6" style="" class="scenarioImg">
                    <div  style="margin:0 5px">
                        <img :src="backgroundImg.scenarioTwo" alt="" style="width: 100%;height: 100%;background-color: #fff;">
                    </div>
                </Col>
                <Col span="6" style="" class="scenarioImg">
                    <div  style="margin:0 5px">
                        <img :src="backgroundImg.scenarioThree" alt="" style="width: 100%;height: 100%;background-color: #fff;">
                    </div>
                </Col>
                <Col span="6" style="" class="scenarioImg">
                    <div  style="margin:0 0 0 10px">
                        <img :src="backgroundImg.scenarioFour" alt="" style="width: 100%;height: 100%;background-color: #fff;">
                    </div>
                </Col>
            </Row>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row class="copyright">
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
        <Col span="20" style="margin-top: 40px;margin-bottom:50px;text-align: center;">
            <table style="color:#868489;font-size: 15px;" width="100%" border="0" align='center' cellspacing="15px">
                <tr style="color:#ffffff;font-size: 17px;" align='left'>
                    <th width="20%">关于</th>
                    <th width="20%">服务</th>
                    <th width="20%">实力</th>
                    <th width="20%">新闻</th>
                    <th width="20%">联系</th>
                </tr>
                <tr align='left' class="copyrightTd">
                    <td>公司简介</td>
                    <td>服务范围</td>
                    <td>案例欣赏</td>
                    <td>公司新闻</td>
                    <td>电话：13512222258</td>
                </tr>
                <tr align='left' class="copyrightTd">
                    <td>发展历程</td>
                    <td>服务优势</td>
                    <td>客户名录</td>
                    <td>行业动态</td>
                    <td>邮箱：18822096690@163.com</td>
                </tr>
                <tr align='left' class="copyrightTd">
                    <td>工作环境</td>
                    <td>服务流程</td>
                    <td>专家团队</td>
                    <td>常见问题</td>
                    <td>QQ：1747409565</td>
                </tr>
                <tr align='left' class="copyrightTd">
                    <td>组织架构</td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td>地址：天津市南开区鞍山西道286号</td>
                </tr>
            </table>
        </Col>
        <Col span="2"><div style="width: 1px;height: 1px;"></div></Col>
    </Row>
    <Row>
        <Col span="24"><div style="width: 1px;height:160px;"></div></Col>
    </Row>
</div>
</template>
<script>
import LoginForm from './login-form'
export default {
    components: {
    LoginForm
    },
    data () {
        return {
        displayOne:true,
        userAvator:'',
        carousel:0,
        TabPaneName:'1',
        backgroundImg:{
            redian:'',
            feidian:'',
            huomiao:''
        },
        dataTableRight:[],
        columnsTableRight:[
            {
                title: '#',
                key: 'icon',
                align:'left',
                width:50,
                tooltip:true,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '',
                              innerHTML: ''
                          }
                      })
                    ]);
                },
                render: (h, params) => {//因为图标是组合类型的，所以这里没有使用Icon组件，而是用原生
                    if(params.row.icon&&params.row.icon!=''){
                        if(params.row.icon=='boil'){
                            return h('div',{
                                style:{
                                  textAlign: 'center'
                                }
                            },[
                              h('div', {
                                style: {
                                  backgroundImage: 'url('+this.backgroundImg.feidian+')',
                                  height:"29px",
                                  width:'29px'
                                },
                              })
                            ])
                        }else if(params.row.icon=='hot'){
                            return h('div',{
                                style:{
                                  textAlign: 'center'
                                }
                            },[
                              h('div', {
                                style: {
                                 backgroundImage: 'url('+this.backgroundImg.redian+')',
                                  height:"29px",
                                  width:'29px'
                                },
                              })
                            ])
                        }else{
                        return h('div',{},'') 
                        }
                    }else{
                        return h('div',{},'')
                    }
                }
            },
            {
                title: '序列',
                key: 'index',
                align:'right',
                width:15,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '',
                              innerHTML: ''
                          }
                      })
                    ]);
                },
                render: (h, params) => {
                     return h('span',{
                         style:{
                            textAlign: 'right'
                        }
                     },params.index+1+'.')
                }
            },
            {
                title: '标题',
                key: 'title',
                tooltip:true,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '',
                              innerHTML: ''
                          }
                      })
                    ]);
                },
            },
            {
                title: '传播指数',
                key: 'spread',
                align:'center',
                tooltip:true,
                width:110,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '传播指数',
                              innerHTML: '传播指数'
                          },
                          style: {
                            color: '#0c89eb',
                            fontWeight: 500,
                            fontSize: '17px'
                          },
                      })
                    ]);
                },
                render: (h, params) => {
                    let color=""
                    if(params.index==0||params.index==1){
                        color='#f9a605'
                    }
                  return h('span',{
                      style: {
                            color: color,
                          },
                  },params.row.spread)
                }
            },
            {
                title: '风险指数',
                key: 'risk',
                align:'center',
                tooltip:true,
                width:110,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '风险指数',
                              innerHTML: '风险指数'
                          },
                          style: {
                            color: '#0c89eb',
                            fontWeight: 500,
                            fontSize: '17px'
                          },
                      })
                    ]);
                },
                render: (h, params) => {
                    let color=""
                    if(params.index==0||params.index==1){
                        color='#ff0b05'
                    }
                  return h('span',{
                      style: {
                            color: color,
                          },
                  },params.row.risk)
                }
            }
        ],
        dataTable:[],
        columnsTable:[
            {
                title: '标题',
                key: 'title',
                tooltip:true,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '',
                              innerHTML: ''
                          }
                      })
                    ]);
                },
            },
            {
                title: '传播指数',
                key: 'spread',
                align:'center',
                tooltip:true,
                width:110,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '传播指数',
                              innerHTML: '传播指数'
                          },
                          style: {
                            color: '#0c89eb',
                            fontWeight: 500,
                            fontSize: '17px'
                          },
                      })
                    ]);
                },
                render: (h, params) => {
                    let color=""
                    if(params.index==0||params.index==1){
                        color='#f9a605'
                    }
                  return h('span',{
                      style: {
                            color: color,
                          },
                  },params.row.spread)
                }
            },
            {
                title: '风险指数',
                key: 'risk',
                align:'center',
                tooltip:true,
                width:110,
                renderHeader: (h, index) => {
                    return h('div',[
                      h('span',{
                          domProps: {
                              title: '风险指数',
                              innerHTML: '风险指数'
                          },
                          style: {
                            color: '#0c89eb',
                            fontWeight: 500,
                            fontSize: '17px'
                          },
                      })
                    ]);
                },
                render: (h, params) => {
                    let color=""
                    if(params.index==0||params.index==1){
                        color='#ff0b05'
                    }
                  return h('span',{
                      style: {
                            color: color,
                          },
                  },params.row.risk)
                }
            }
        ],
        //carouselList:[]
        carouselOne:"",
        carouselTwo:"",
        carouselThree:'',
        }
    },
    created(){
        this.userAvator=require('../assets/IMG/Avatar.png')
        //this.carouselList=[{icon:require('../assets/IMG/carouselOne.jpg'),icon:'介绍'},{icon:require('../assets/IMG/carouselTwo.jpg'),icon:'介绍'},{icon:require('../assets/IMG/carouselThree.jpg'),icon:'介绍'}]
        this.carouselOne=require('../assets/IMG/carouselOne.jpg')
        this.carouselTwo=require('../assets/IMG/carouselTwo.jpg')
        this.carouselThree=require('../assets/IMG/carouselThree.jpg')
        this.backgroundImg.redian=require('../assets/IMG/redian.png')
        this.backgroundImg.feidian=require('../assets/IMG/feidian.png')
        this.backgroundImg.huomiao=require('../assets/IMG/huomiao.png')
        this.backgroundImg.introduceOne=require('../assets/IMG/introduceOne.png')
        this.backgroundImg.introduceTwo=require('../assets/IMG/introduceTwo.png')
        this.backgroundImg.introduceThree=require('../assets/IMG/introduceThree.png')
        this.backgroundImg.introduceFour=require('../assets/IMG/introduceFour.png')
        this.backgroundImg.introduceFive=require('../assets/IMG/introduceFive.png')
        this.backgroundImg.introduceSix=require('../assets/IMG/introduceSix.png')
        this.backgroundImg.advantageOne=require('../assets/IMG/advantageOne.png')
        this.backgroundImg.advantageTwo=require('../assets/IMG/advantageTwo.png')
        this.backgroundImg.advantageThree=require('../assets/IMG/advantageThree.png')
        this.backgroundImg.scenarioOne=require('../assets/IMG/scenarioOne.png')
        this.backgroundImg.scenarioTwo=require('../assets/IMG/scenarioTwo.png')
        this.backgroundImg.scenarioThree=require('../assets/IMG/scenarioThree.png')
        this.backgroundImg.scenarioFour=require('../assets/IMG/scenarioFour.png')
        this.dataTable=[]
        for(let i=0;i<10;i++){
            this.dataTable.push({title:'康美造假罚款60万',spread:60,risk:87})
        }
        this.dataTableRight=[{title:'康美造假罚款60万',spread:60,risk:87,icon:'boil'},
        {title:'康美造假罚款60万',spread:60,risk:87,icon:'hot'}]
        for(let i=0;i<4;i++){
            this.dataTableRight.push({title:'康美造假罚款60万',spread:60,risk:87})
        }
   },
    methods:{
        infoWindowOpen(){
            //this.displayOne=false
        },
        infoWindowClose(){
            //this.displayOne=true
        },
        handleSubmit({ userName, password }){
             this.$Message[info]({
                    background: true,
                    content: '登录成功！'
                });
        },
    }
}
</script>
<style lang="less">
.head {
  background-color: #ffffff;
}
.navigation {
  background-color: #0c8aebc5;
  .navigationList {
    color: #ecedf4;
    text-align: center;
    cursor: pointer;
    div {
      margin: 9px 0;
      font-size: 15px;
      font-weight: 600;
    }
    &:hover {
      background-color: #79bef2;
    }
  }
  .HoverDisplay {
    background-color: #79bef2;
  }
}
.carousel {
  .demo-carousel {
    width: 100%;
    height: 600px;
    background-color: aliceblue;
  }
}
.tracking {
  background-color: #f5f5f5;
  .TabPaneClass {
    /deep/.ivu-tabs {
        .ivu-tabs-bar {
            border-bottom: none;
            .ivu-tabs-nav-container{
                font-size: 17px !important;
                font-weight: 600 !important;
            }
        }
        }
    /deep/.ivu-table {
        font-size: 16px !important;
        th {
          background-color: #ffffff !important;
          border: none;
        }
        td{
          border: none;
          cursor: pointer;
        }
        &:before {
          background-color: #ffffff !important;
        }
      }
    /deep/.ivu-table-border {
        &:after {
          background-color: #ffffff !important;
        }
      }
    
  }
}
.introduce{
    .introduceImg{
        cursor: pointer;
        z-index: 6;
        transform: scale(1);
		transition: all 1s ease 0s;
		-webkit-transform: scale(1);
        -webkit-transform: all 1s ease 0s;
        &:hover{
            z-index: 666;
            transform: scale(1.1);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1.1);
				-webkit-transform: all 1s ease 0s;
			}
    }
}
.advantage{
   background-color: #282a37;
   .advantageImg{
       cursor: pointer;
        z-index: 6;
        transform: scale(1);
		transition: all 1s ease 0s;
		-webkit-transform: scale(1);
        -webkit-transform: all 1s ease 0s;
        &:hover{
            z-index: 666;
            transform: scale(1.1);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1.1);
				-webkit-transform: all 1s ease 0s;
			}
    }
}
.scenario{
    .scenarioImg{
        cursor: pointer;
        z-index: 6;
        transform: scale(1);
		transition: all 1s ease 0s;
		-webkit-transform: scale(1);
        -webkit-transform: all 1s ease 0s;
        &:hover{
            z-index: 666;
            transform: scale(1.1);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1.1);
				-webkit-transform: all 1s ease 0s;
			}
    }
}
.copyright{
    background-color: #31303d;
    .copyrightTd{
        td{
            cursor: pointer;
            &:hover{
                color: #9e9e9e;
            }
        }
    }
}
/* 将表格修改使用 */
#headTemplate {
  .head {
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .infoButton {
      color: #57c5f7;
      font-size: 14px;
      cursor: pointer;
      line-height: 2;
    }
  }
}

</style>
<style lang="less" scoped>
.login{
    width: 100%;
    height: 300px;
    //background-image: url('../../assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    &-con{
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        &-header{
            font-size: 16px;
            font-weight: 300;
            text-align: center;
            padding: 30px 0;
        }
        .form-con{
            padding: 10px 0 0;
        }
        .login-tip{
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
}
</style>